* {margin:0;padding:0}

body {
    background:#fff;
    color:#555;
    font:12px Tahoma,Arial;
}

header{padding:10px 20px;background:#5E1418}
    header a {color:rgba(255,255,255,0.5);font-size:1.5em;margin:10px;text-decoration:none;border-left:1px solid rgba(255,255,255,0.3);padding-left:20px}
    header a:last-child,header a:first-child{border:none}
    header a:hover{color:#fff}
section{padding:20px}

h1 {
    font-size:20px;
    margin-bottom:20px;
    color:#863D34
}

p {
    margin:0 0 10px
}
a {
    outline:none;
    color:#369;
    text-decoration:underline
}

.left{float:left}
.right{float:right}

.savePositions{display:none}

.action {
    overflow:hidden;
    text-align:center;
    text-decoration: none;
    font-size:10px;
    font-weight:bolder;
    line-height:16px;
    border-radius:3px;
    padding:2px 4px;
}
    .action.delete{
        background:#f00;
        color:#fff;
    }

form {
    
}
    label {
        display:inline-block;
        width:100px;
        text-align:right;
        margin:7px 0
    }
    input[type=text],input[type=password], textarea{
        margin:5px;
        padding:2px 4px;
        border:1px solid #aaa
    }
    input[type=submit], input[type=button] {
        float:right;
        clear:both;
        background:#319310;
        color:#fff;
        border:none;
        padding:3px 5px;
        cursor:pointer;
        margin:5px
    }
    input.form-error,textarea.form-error{border-color:red}
    input.number {
        width:50px;
        text-align:right
    }
    input.price {
        width:70px;
        text-align:right
    }
    input.large{ width:400px }
    
#flashMessageContainer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    text-align:center;
}
    #flashMessage {
        padding:10px 0;
        width:100%;
        box-shadow:0 0 3px #555;
        font-weight:bolder;
        color:#fff
    }
    #flashMessage.error {background:red}
    #flashMessage.ok {background:darkgreen}
    
.error-container {color:red;font-size:11px}

#menu {
    float:left;
}
    #menu ul {
        list-style:none;
        text-align:right;
    }
    #menu a {
        display:block;
        padding:3px 5px;
        text-decoration:none;
        color:#369
    }

#content {
    float:left;
    margin-left:20px;
    padding-left:20px;
    border-left:1px dotted #777
}

.menu {
    list-style:none;
    width:120px;
    text-align:right;
    margin-right:20px
}
    .menu a, .menu strong {
        display:block;
        padding:3px 5px;
        text-decoration:none;
        color:#555
    }
    .menu a:hover {color:#369;text-decoration:underline}
    .menu strong {color:#863D34}
    .menu strong:after {content: "»"}

.sortable {
    
}
    .sortable.loading {
        background:url(../img/loading-white.gif) no-repeat center center
    }
    .sortable.loading * {
        opacity:0.2;
    }
    .sortable li {position:relative}
    .sortable .handle{
        position:absolute;
        left:0;
        top:6px;
        cursor:move;
        display:none;
        width:10px;
        height:10px;
        overflow:hidden;
        background:url(../img/sortable-handle.png);
        line-height:100px
    }
    .sortable li:hover .handle{display:block}
    .sortable .placeholder{background:#eee}
    .sortable .ui-sortable-helper{background:#fff;border:1px solid #ccc}

.pagination {
    clear:both;
    margin:20px 0;
    text-align:center;
    color:#7F775E;
    font-size:14px
}
    .pagination .numbers {
        display:inline-block
    }
    .pagination a, .pagination span{
        color:#7F775E;
        display:inline-block;
        margin:0 3px;
        text-decoration:none;
    }
    .pagination a:hover {
        color:#555
    }
    .pagination .current {
        color:#3B559F;
        font-weight:bolder
    }

table {
    border-collapse: collapse;
    font-size:14px;
    width:600px;
    position:relative
}
    table caption {
        padding:0 0 10px;
        text-align:left
    }
    caption a, a.button {
        display:inline-block;
        border-radius:3px;
        background:#aaa;
        color:#fff;
        font-size:11px;
        text-decoration:none;
        padding: 3px 5px;
        margin:0 3px
    }
    caption a:hover,a.button:hover {
        background:#999;
        color:#fff;
        text-decoration:none
    }
    caption a.pre{ border-radius:3px 0 0 3px; margin-right:0 }
    caption a.has-pre{border-radius: 0 3px 3px 0; margin-left:0}
    th {
        background:#777;
        color:#fff;
        padding:3px 5px;
        text-align: left
    }
    td {
        padding:5px
    }
    tr:nth-child(2n-1) td{
        background:#eee
    }
    tr.ui-sortable-helper {
        border:1px solid #000;
        background:#fc0
    }
    tr.ui-sortable-helper td{visibility:hidden}
    tr.ui-sortable-helper td:first-child{visibility:visible;background:transparent !important}
    tr.placeholder td{background:#fc0 !important}
    
    .entity tr:hover td{background:#336699;color:#fff}
    .entity tr:hover a{color:#fff}
    
    .entity tr.pagination:hover td{background:transparent;color:#555}
    .entity tr.pagination:hover a{color:#7F775E}
    .entity tr.pagination:hover a:hover{color:#000}
    
    table .action{
        position:absolute;
        margin-top:-10px;
        display:none
    }
    tr:hover .action{display:block}
.image-list {
        list-style:none;
        float:left;
        margin:5px
}
    .image-list li {
            float:left;
            width:100px;
            height:100px;
            border:1px solid #ccc;
            margin:0 1px 1px 0;
            position:relative
    }
    .image-list li.control {
            width:auto
    }
    .image-list .remove {
            z-index:2;
            position:absolute;
            width:10px;
            height:10px;
            font-size:10px;
            font-weight:bolder;
            right:2px;
            top:2px;
            line-height:7px;
            color:#fff;
            background:#f00;
            text-align:center;
            text-decoration:none
    }
    .image-list li:first-child .remove {
            display:none
    }
.upload-wrap {
        width:100px;
        height:100px;
        position:relative;
        float:left;
        border-left:1px dotted #ccc;
}
    .upload-wrap:first-child{border:none}
    .upload-wrap .add, .upload-wrap .pick{
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            text-align:center;
            line-height:100px;
            font-size:30px;
            font-weight:bolder;
            text-decoration:none;
            color:#ccc;
            z-index:1
    }
    .upload-wrap .add:hover, .upload-wrap .pick:hover{
            color:#fff;
            background:#13A2EF
    }
    .upload-wrap.selected .add, .upload-wrap.selected .pick {
            background:url(../img/selected.png) no-repeat center center;
            color:transparent
    }

.multi-inputs .handle {
    width:20px;
    height:20px;
    display:inline-block;
    text-indent:-100em;
    overflow:hidden;
    cursor:move;
    background:url(../img/reorder.png) no-repeat center center
}
    
.multi-inputs .placeholder {
    display:block;
    background:#ccc;
    height:32px
}
